<template>
  <div class="home">
    <el-container>
      <!-- 头部 -->
      <el-header class="bg-green1 text-white text-bl pl-0 d-flex ai-center z-2 jc-between">
        <div class="header-left">
          <i class="iconfont">&#xe66d;</i>
          <span class="letter-s">中药材管理信息系统</span>
        </div>

        <el-button @click="logout" class="bg-green2 text-white">退出</el-button>
      </el-header>
      <el-container>
        <!-- 导航栏 -->
        <el-aside width="200px" class="bg-green2">
          <el-menu background-color="#70887d" text-color="#1a3b32" active-text-color="#ffffff"
          unique-opened router :default-active="activePath">
            <!-- 一级菜单 -->
            <el-submenu :index="item.id + ''" v-for="item in navList" :key="item.id">
              <!-- 模板 -->
              <template slot="title">
                <!-- icon -->
                <i class="iconfont">{{item.icon}}</i>
                <!-- text -->
                <span>{{item.navName}}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"
              @click="saveNav(subItem.path)">
                <i class="iconfont">{{subItem.icon}}</i>
                <!-- text -->
                <span>{{subItem.navName}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //导航栏数据
        navList: [{
          id: 100,
          navName: '用户管理',
          icon: '\ue609',
          path: '/users',
          children: [{
            id: 101,
            navName: '用户信息',
            icon: '\ue608',
            path: '/users'
          }]
        }, {
          id: 110,
          navName: '药材管理',
          icon: '\ue604',
          path: '/information',
          children: [{
            id: 111,
            navName: '药材信息',
            icon: '\ue608',
            path: '/information'
          }]
        }, {
          id: 120,
          navName: '库存管理',
          icon: '\ue60a',
          path: '/stock',
          children: [{
            id: 121,
            navName: '入库',
            icon: '\ue606',
            path: '/in'
          }, {
            id: 122,
            navName: '出库',
            icon: '\ue601',
            path: '/out'
          }]
        }, {
          id: 130,
          navName: '统计分析',
          icon: '\ue603',
          path: '/chart',
          children: [{
            id: 131,
            navName: '全部药材统计',
            icon: '\ue7b5',
            path: '/allchart'
          },{
            id: 132,
            navName: '单种药材统计',
            icon: '\ue602',
            path: '/singlechart'
          }]
        }],
        activePath: ''

      }
    },
    created() {
      this.activePath = window.sessionStorage.getItem('activePath')
    },
    methods: {
      logout() {
        window.sessionStorage.clear()
        this.$router.push('/login')
      },
      //保存当前点击的路由地址
      saveNav(path) {
        window.sessionStorage.setItem('activePath', path)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home,
  .el-container {
    height: 100%;
    .el-menu {
      border-right: none;
    }
  }
  .header-left i {
    color: white;
    margin: 0 20px;
  }
</style>
